<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片转base64</title>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>
        <input accept="image/*" name="upimage" id="upload_file" type="file">
        <input type="hidden" id="base64_output" name="Word">
        <img src="" style="display: block" id="img" alt="" width="400">
        <script type="text/javascript">
            $("#upload_file").on('change',function(){
                var file = $('#upload_file')[0].files[0];
                reader = new FileReader();  //JavaScript 中的FileReader对象（实现上传图片预览）
                reader.onload = function(){
                    console.log(reader)
                    var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1)
                    //截取base64码部分（可选可不选，需要与后台沟通）
                    console.log(ImgFileSize)  
                    $('#base64_output').val(reader.result);
                    $('#img').attr('src',reader.result)
                }
                reader.readAsDataURL(file);    //Base64
            })
        </script>
</body>
</html>